<script setup lang="ts">
import { reactive, ref } from "vue"; //导入 vue 相关函数
import type { FormInstance } from "element-plus"; //导入表单实例类型
import { ElMessage } from "element-plus"; //导入消息框
import { useRouter } from "vue-router"; //导入路由 useRouter 函数
import { login } from "../../api"; //导入 axios 接口
import { useToken } from "../../stores/token"; //导入 token 状态文件
import { useAdmin } from "../../stores/admin"; //导入 admin 状态文件
//执行方法获得 tokenStore 对象
const tokenStore = useToken();
//执行方法获得 adminStore 对象
const adminStore = useAdmin();
//获得路由实例
const router = useRouter();
//定义表单数据对象
const user = reactive({
  username: "admin",
  password: "123456",
});
//定义表单对象实例的引用
const formRef = ref<FormInstance>();
//定义表单验证规则
const rules = reactive({
  username: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
  password: [
    { required: true, message: "密码不能为空", trigger: "blur" },
    { min: 6, max: 24, message: "密码长度为 6~24 个字符", trigger: "blur" },
  ],
});
//表单提交
const checkLogin = async () => {
  await formRef.value?.validate(async (valid, _fields) => {
    if (valid) {
      //登录验证
      const res = await login(user);
      //判断登录状态
      if (res.data.errno == 0) {
        //更新 token 状态
        tokenStore.updateToken(res.data.data.token);
        //更新用户状态
        await adminStore.updateAdmin();
        //登录成功
        ElMessage({ type: "success", message: res.data.errmsg });
        //进入后台首页
        router.push("/");
      } else {
        //登录失败
        ElMessage({ type: "error", message: res.data.errmsg });
      }
    }
  });
};
//表单重置
function resetForm() {
  user.username = "";
  user.password = "";
}
</script>

<template>
  <section>
    <header><img src="@/assets/images/EasyGo_Logo.png" /></header>
    <section class="content">
      <div>
        <div>管理员登录</div>
        <div>
          <el-form
            ref="formRef"
            :model="user"
            :rules="rules"
            label-width="80px"
            label-positi
            on="right"
            status-icon
          >
            <el-form-item label="登录名称" prop="username">
              <el-input v-model="user.username" />
            </el-form-item>
            <el-form-item label="登录密码" prop="password">
              <el-input v-model="user.password" type="password" />
            </el-form-item>
            <el-form-item label-width="120px">
              <el-button type="primary" @click="checkLogin">登录</el-button>
              <el-button @click="resetForm">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </section>
  </section>
</template>

<style scoped>
section {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
header {
  width: 1000px;
  margin: 0px auto;
}
header img {
  width: 130px;
  height: 80px;
}
.content {
  width: 100%;
  min-width: 1000px;
  background: url("@/assets/images/Login_Backgroud.jpg") no-repeat center/cover;
  position: relative;
}
.content > div {
  width: 400px;
  background: #ffffff;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-10%, -60%);
}
.content > div > div:first-child {
  font-size: 20px;
  text-align: center;
  line-height: 70px;
  border-bottom: 1px solid #edf0f0;
}
section > div > div:last-child {
  padding: 20px 20px 0px 20px;
}
</style>
